/*
钓鱼游戏UI系统
包含状态显示、统计面板和VR友好的界面
支持2D和3D UI显示
*/

import * as THREE from 'three';
import * as ThreeMeshUI from 'three-mesh-ui';

class FishingUI {
  constructor() {
    // UI容器
    this.container2D = null;
    this.container3D = null;
    
    // UI面板
    this.statusPanel = null;
    this.statsPanel = null;
    this.battlePanel = null;
    this.resultPanel = null;
    
    // 当前状态
    this.isVRMode = false;
    
    this.init();
  }
  
  init() {
    this.create2DUI();
    this.create3DUI();
    console.log('🎨 钓鱼UI系统已初始化');
  }
  
  create2DUI() {
    // 创建2D UI容器（非VR模式）
    this.container2D = document.createElement('div');
    this.container2D.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 100;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    `;
    
    document.body.appendChild(this.container2D);
    
    this.create2DStatusPanel();
    this.create2DStatsPanel();
    this.create2DBattlePanel();
    this.create2DResultPanel();
  }
  
  create2DStatusPanel() {
    // 状态显示面板
    this.statusPanel = document.createElement('div');
    this.statusPanel.style.cssText = `
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 15px 25px;
      border-radius: 10px;
      text-align: center;
      min-width: 200px;
      border: 2px solid #4682B4;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    `;
    
    this.statusPanel.innerHTML = `
      <div id="fishing-status" style="font-size: 18px; font-weight: bold; margin-bottom: 8px;">
        🎣 准备钓鱼
      </div>
      <div id="fishing-time" style="font-size: 14px; opacity: 0.8;">
        等待时间: 0s
      </div>
    `;
    
    this.container2D.appendChild(this.statusPanel);
  }
  
  create2DStatsPanel() {
    // 统计面板
    this.statsPanel = document.createElement('div');
    this.statsPanel.style.cssText = `
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(46, 139, 87, 0.9);
      color: white;
      padding: 15px;
      border-radius: 10px;
      min-width: 200px;
      border: 2px solid #2E8B57;
    `;
    
    this.statsPanel.innerHTML = `
      <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px; text-align: center;">
        📊 钓鱼统计
      </div>
      <div id="total-caught" style="margin-bottom: 5px;">🐟 总钓获: 0</div>
      <div id="total-experience" style="margin-bottom: 5px;">⭐ 经验: 0</div>
      <div id="total-time" style="margin-bottom: 5px;">⏰ 时间: 0s</div>
      <div id="best-fish" style="margin-bottom: 5px;">🏆 最佳: 无</div>
    `;
    
    this.container2D.appendChild(this.statsPanel);
  }
  
  create2DBattlePanel() {
    // 战斗面板（隐藏状态）
    this.battlePanel = document.createElement('div');
    this.battlePanel.style.cssText = `
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 69, 0, 0.9);
      color: white;
      padding: 20px;
      border-radius: 15px;
      text-align: center;
      min-width: 300px;
      border: 3px solid #FF4500;
      display: none;
    `;
    
    this.battlePanel.innerHTML = `
      <div id="battle-fish-name" style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">
        鱼类名称
      </div>
      <div id="battle-fish-info" style="font-size: 14px; margin-bottom: 15px;">
        重量: 0kg | 稀有度: 普通
      </div>
      <div style="background: rgba(0, 0, 0, 0.3); border-radius: 10px; height: 20px; margin-bottom: 10px;">
        <div id="battle-progress" style="background: linear-gradient(90deg, #FFD700, #FFA500); height: 100%; border-radius: 10px; width: 0%; transition: width 0.3s ease;"></div>
      </div>
      <div style="font-size: 12px; opacity: 0.9;">快收竿！鱼在挣扎！</div>
    `;
    
    this.container2D.appendChild(this.battlePanel);
  }
  
  create2DResultPanel() {
    // 结果展示面板
    this.resultPanel = document.createElement('div');
    this.resultPanel.style.cssText = `
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(135deg, #FFD700, #FFA500);
      color: #333;
      padding: 30px;
      border-radius: 20px;
      text-align: center;
      min-width: 350px;
      border: 4px solid #FFD700;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      display: none;
    `;
    
    this.resultPanel.innerHTML = `
      <div style="font-size: 24px; font-weight: bold; margin-bottom: 15px;">
        🎉 钓鱼成功！
      </div>
      <div id="result-fish-name" style="font-size: 20px; margin-bottom: 10px;">
        鱼类名称
      </div>
      <div id="result-fish-details" style="font-size: 16px; margin-bottom: 15px;">
        重量: 0kg | 经验: +0 | 价值: 0金币
      </div>
      <div id="result-rarity" style="font-size: 14px; margin-bottom: 10px;">
        稀有度: 普通
      </div>
      <div style="font-size: 12px; opacity: 0.8;">
        3秒后继续钓鱼...
      </div>
    `;
    
    this.container2D.appendChild(this.resultPanel);
  }
  
  create3DUI() {
    // 创建3D UI容器（VR模式）
    // 这里将来可以添加Three-Mesh-UI的3D界面
    console.log('3D UI系统待实现');
  }
  
  // 显示钓鱼状态
  showFishingStatus(message) {
    const statusElement = document.getElementById('fishing-status');
    if (statusElement) {
      statusElement.textContent = message;
    }
  }
  
  // 更新钓鱼时间
  updateFishingTime(time) {
    const timeElement = document.getElementById('fishing-time');
    if (timeElement) {
      timeElement.textContent = `等待时间: ${time.toFixed(1)}s`;
    }
  }
  
  // 更新统计数据
  updateStats(stats) {
    document.getElementById('total-caught').textContent = `🐟 总钓获: ${stats.totalCaught}`;
    document.getElementById('total-experience').textContent = `⭐ 经验: ${stats.experience}`;
    document.getElementById('total-time').textContent = `⏰ 时间: ${Math.floor(stats.totalTime)}s`;
    
    if (stats.bestFish) {
      document.getElementById('best-fish').textContent = 
        `🏆 最佳: ${stats.bestFish.name} (${stats.bestFish.weight.toFixed(2)}kg)`;
    }
  }
  
  // 显示鱼战斗UI
  showFishBattleUI(fish) {
    this.battlePanel.style.display = 'block';
    
    document.getElementById('battle-fish-name').textContent = fish.name;
    document.getElementById('battle-fish-info').textContent = 
      `重量: ${fish.weight.toFixed(2)}kg | 稀有度: ${this.getRarityText(fish.rarity)}`;
  }
  
  // 隐藏鱼战斗UI
  hideFishBattleUI() {
    this.battlePanel.style.display = 'none';
  }
  
  // 更新战斗进度
  updateBattleProgress(progress) {
    const progressBar = document.getElementById('battle-progress');
    if (progressBar) {
      progressBar.style.width = `${progress * 100}%`;
    }
  }
  
  // 显示钓鱼结果
  showFishCatchResult(fish, stats) {
    this.resultPanel.style.display = 'block';
    
    // 设置鱼的稀有度颜色
    const rarityColors = {
      common: '#90EE90',
      rare: '#87CEEB', 
      epic: '#DDA0DD',
      legendary: '#FFD700'
    };
    
    this.resultPanel.style.background = 
      `linear-gradient(135deg, ${rarityColors[fish.rarity] || '#FFD700'}, #FFA500)`;
    
    document.getElementById('result-fish-name').textContent = fish.name;
    document.getElementById('result-fish-details').textContent = 
      `重量: ${fish.weight.toFixed(2)}kg | 经验: +${fish.experience} | 价值: ${fish.value}金币`;
    document.getElementById('result-rarity').textContent = 
      `稀有度: ${this.getRarityText(fish.rarity)}`;
    
    // 3秒后自动隐藏
    setTimeout(() => {
      this.resultPanel.style.display = 'none';
    }, 3000);
  }
  
  // 获取稀有度文字
  getRarityText(rarity) {
    const rarityMap = {
      common: '普通',
      rare: '稀有', 
      epic: '珍稀',
      legendary: '传说'
    };
    
    return rarityMap[rarity] || '未知';
  }
  
  // 显示提示信息
  showTooltip(message, duration = 3000) {
    const tooltip = document.createElement('div');
    tooltip.style.cssText = `
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      font: 14px 'Microsoft YaHei', Arial, sans-serif;
      z-index: 200;
      opacity: 0;
      transition: opacity 0.3s ease;
    `;
    tooltip.textContent = message;
    
    document.body.appendChild(tooltip);
    
    setTimeout(() => {
      tooltip.style.opacity = '1';
    }, 10);
    
    setTimeout(() => {
      tooltip.style.opacity = '0';
      setTimeout(() => {
        if (tooltip.parentNode) {
          tooltip.parentNode.removeChild(tooltip);
        }
      }, 300);
    }, duration);
  }
  
  // 切换VR模式UI
  toggleVRMode(isVR) {
    this.isVRMode = isVR;
    
    if (isVR) {
      // VR模式：隐藏2D UI
      this.container2D.style.display = 'none';
      console.log('🥽 切换到VR UI模式');
    } else {
      // 非VR模式：显示2D UI
      this.container2D.style.display = 'block';
      console.log('🖥️ 切换到2D UI模式');
    }
  }
  
  // 创建VR控制提示
  showVRControls() {
    if (!this.isVRMode) return;
    
    // 在VR空间中显示控制提示
    this.showTooltip('右手扳机: 抛竿/起钩 | 左手扳机: 收竿', 5000);
  }
  
  // 销毁UI
  destroy() {
    if (this.container2D && this.container2D.parentNode) {
      this.container2D.parentNode.removeChild(this.container2D);
    }
    
    // 清理3D UI
    if (this.container3D) {
      // 清理Three-Mesh-UI组件
    }
  }
}

export { FishingUI }; 